	<include file="public@head"/>
	<style>
		.chartbox{
			position: relative;
		}
		.tips{
			position: absolute;
			right: 10%;
			top: 40px;
			z-index: 2;
			background-color: #fff;
			box-shadow:0px 0px 10px 0px rgba(0,0,0,0.09);
			border-radius:5px;
			width: 200px;
			padding: 10px 20px;
		}
		.tips h3{
			color: #F08E00;
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="wrap">
		<div class="panel panel-default">
			<div class="panel-heading">
	            <h3 class="panel-title">统计四</h3>
	        </div>
			<div class="content">
				<!-- 图表 -->
				<div class="chartbox">
					<div class="tips">
						<p>历史金币总额</p>
						<h3>4521</h3>
					</div>
					<div class="chart" id="chart"></div>
				</div>
			</div>
		</div>
	</div>
	<include file="public@scripts"/>
	<script>
		$(function () {
			var myChart = echarts.init($("#chart")[0]);
			var option = {
				title: {
					text: '数据统计',
					left: '8%'
				},
				xAxis: {
					type: 'category',
					name: '时间',
					splitLine: {
						interval: 0,
						show: true,
						lineStyle: {
							type: 'dashed'
						}
					},
					boundaryGap: false,
					data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
					axisLabel: {
						formatter: '{value} 日'
					}
				},
				yAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							type: 'dashed'
						}
					},
					name: '金币',
					nameLocation: 'end',
					nameTextStyle: {
						align: 'right'
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						formatter: '{value} k'
					}
				},
				legend: {
					top: 20,
					left: '15%',
					data: ['金币总额']
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'none'
					},
					backgroundColor: '#ffffff',
					textStyle: {
						color: ['#000']
					}
				},
				series: [{
					name: '金币总额',
					data: [3, 6, 9, 12, 16, 15, 13, 21, 8, 5, 12, 18, 9, 7, 12],
					type: 'line',
					showSymbol: false,
					smooth: true,
					itemStyle: {
						normal: {
							color: "rgba(240, 142, 0, 1)"
						},
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(240, 142, 0, 0.8)'
							}, {
								offset: 0.8,
								color: 'rgba(240, 142, 0, 0.2)'
							}], false)
						}
					},
				}]
			};
			myChart.setOption(option);

		});
	</script>
</body>

</html>